<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import _ from "lodash";
import { debounce } from "lodash";
import { useRoute, useRouter } from "vue-router";
import store from "@/store/index";

import { ArrowRightOutlined, CloseCircleOutlined, CloseCircleFilled } from "@ant-design/icons-vue";
import { message, Modal, notification } from "ant-design-vue";
import utils from "../../common/utils/utils";
import request from "../../common/utils/request";
import axios from "axios";

const baseurl = ref("https://cos.kuaijingai.com");

const createAnimation = (element, callback, animationName) => {
  const observer = new IntersectionObserver(callback, {
    root: null,
    threshold: 0.2,
    once: true,
  });
  if (element.length) {
    for (let e of element) {
      e.dataset.animationName = animationName;
      observer.observe(e);
    }
  } else {
    element.dataset.animationName = animationName;
    observer.observe(element);
  }
};

const appName =ref('');

const router = useRouter();


const isbanner = ref(true)

// 定义处理交叉观察的回调函数
function handleIntersection(entries) {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 获取动画类名
      const animationName = entry.target.dataset.animationName;

      // 当元素进入视口时，添加动画类名
      entry.target.classList.add(animationName);
    }
  });
}

let tabLineLeft = ref("0px");
let tabLineWidth = ref("96px");

const aiConfig = ref(null);
// const getConfig = async () => {
//   const aiConfigInfo = await store.dispatch("getAiConfig");
//   aiConfig.value = aiConfigInfo;
// };
// getConfig();

const activeNavItem = ref("media-txt");

const observerOptions = {
  rootMargin: "0px",
  threshold: 0.5, // 当元素50%可见时即触发
};
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 当元素进入视口时，更新activeNavItem
      if (entry.target.id == "cpnl") {
        activeNavItem.value = "cpnl";
      } else if (entry.target.id == "Automatic") {
        activeNavItem.value = "Automatic";
      } else if (entry.target.id == "sycj") {
        activeNavItem.value = "sycj";
      } else if (entry.target.id == "cpys") {
        activeNavItem.value = "cpys";
      } else if (entry.target.id == "media-txt") {
        activeNavItem.value = "media-txt";
      } else {
        activeNavItem.value = "lxwm";
      }
    }
  });
}, observerOptions);

const sections = ref([
  "media-txt",
  "cpnl",
  "Automatic",
  "sycj",
  "cpys",
  "lxwm",
]);

const closeFn = () => {
  isbanner.value = false
}

onMounted(() => {
  sections.value.forEach((sectionId) => {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      observer.observe(targetElement);
    }
  });
  let mediaGGoneleft = document.getElementsByClassName("media-GGone-left");
  let mediaGGoneright = document.getElementsByClassName("media-GGone-right");
  let medialeftimg = document.getElementsByClassName("media-left-img");
  let mediarighttext = document.getElementsByClassName("media-right-text");
  let mediamaxtrix = document.getElementsByClassName("media-maxtrix");
  let mediamaxtrixneed = document.getElementsByClassName("media-maxtrix-need");
  let mediamaxtrixcreate = document.getElementsByClassName(
    "media-maxtrix-create"
  );
  createAnimation(mediaGGoneleft, handleIntersection, "antZoomIn");
  createAnimation(mediaGGoneright, handleIntersection, "antMoveRightIn");
  createAnimation(medialeftimg, handleIntersection, "antMoveLeftIn");
  createAnimation(mediarighttext, handleIntersection, "antZoomIn");
  createAnimation(mediamaxtrix, handleIntersection, "fade-in");
  createAnimation(mediamaxtrixneed, handleIntersection, "fade-in");
  createAnimation(mediamaxtrixcreate, handleIntersection, "antZoomIn");
  

  
  nextTick(()=>{
    appName.value = store.getters.aiConfig?.site_name
    if(utils.isLogin()) {
      router.push({ path: "/workShotstack/home" });
    }
  })
});

onUnmounted(() => {
  // 在组件卸载时，停止所有观察
  sections.value.forEach((sectionId) => {
    const targetElement = document.getElementById(sectionId);
    if (targetElement) {
      observer.unobserve(targetElement);
    }
  });
});

const scrollToSection = (targetId) => {
  activeNavItem.value = targetId;
  const targetElement = document.getElementById(targetId);
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: "smooth" });
  }
};

const loginVisible = ref(false);
const visible = ref(false);
// 登录成功的回调
const loginCallback = async () => {
  await getTeamList();
  // utils.isLogin() && (await getTeamList());
  store.dispatch("GetClipRoleList");
  loginVisible.value = false;

  router.push({
    name: "Home",
  });
};

const teamList = ref([]);
const crtTeamInfo = ref({});
const getTeamList = () => {
  return new Promise((resolve, reject) => {
    request
      .get("/work_ai", "/user/team/list", {})
      .then(async (res) => {
        let team_id = "";
        teamList.value = res?.list;
        store.dispatch("GetTeamList", res?.list);
        if (res.list && res.list.length > 0) {
          const teamId = res.list[0].id;
          // const teamId = store.state.user.teamId;
          team_id = teamId;
          if (teamId) {
            const teamInfo = res.list?.find((item) => item.id == teamId);
            if (teamInfo?.team_user_status == 0) {
              const newTeam = res.list?.find((item) => item.can_edit);
              crtTeamInfo.value = newTeam;
              store.commit("SET_TEAM_ID", newTeam.id);
            }
            if (teamInfo) {
              crtTeamInfo.value = teamInfo;
              store.commit("SET_TEAM_ID", teamInfo.id);
            }
          } else {
            const team_info = res.list?.filter(
              (i) => i.team_user_status == 1
            )?.[0];
            crtTeamInfo.value = team_info;
            store.commit("SET_TEAM_ID", team_info?.id);
            team_id = team_info?.id;
          }
        }
        resolve(res);
      })
      .catch((err) => {
        reject(err);
      });
  });
};

const value = ref("");
// 响应式数据
const phoneNumber = ref("");
const inputStatus = ref("");
const inputHelp = ref("");
const username = ref("");
const company = ref("");
// 手机号验证函数
const validatePhoneNumber = () => {
  const phoneNumberRegex = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

  if (!phoneNumber.value) {
    message.error("手机号不能为空");
    return;
  } else if (!phoneNumberRegex.test(phoneNumber.value)) {
    phoneNumber.value = "";
    message.error("请输入正确的手机号格式");
    return;
  } else {
    axios
      .get(
        `https://tel.pigcms.com/index.php?m=notice&c=view&a=webSend&name=${username.value}&phone=${phoneNumber.value}&company=${company.value}&source_name=v.kuaijing.cn&system_type=video`
      )

      .then((res) => {
        if (res.data.code == 0) {
          message.success("提交成功，我们尽快与您联系");
        }
      });
  }
};

const openwm = () => {
  visible.value = true;
  activeNavItem.value = "lxwm";
};

const debouncedValidatePhoneNumber = debounce(validatePhoneNumber, 1000);

const ShotstackLoginModals = ref(null);
const zhuce = ref(false);
const gozhuce = () => {
  zhuce.value = true;
  loginVisible.value = true;
  ShotstackLoginModals.value.LoginChange("code");
};
const isplay = ref(false);
const videoId = ref("myVideo");
// const videoSrc = '../../common/image/workShotstackImage/xuanchuan.mov';
const videoRef = ref(null);
const iscontrols = ref(false);
const togglePlay = () => {
  if (videoRef.value.paused) {
    videoRef.value.play();
    isplay.value = true;
    iscontrols.value = true;
  } else {
    videoRef.value.pause();
    isplay.value = false;
  }
};

const gologin = () => {
  loginVisible.value = true;
  if (utils.getUserToken()) {
    router.push({ path: "/workShotstack/home" });
  }
};
</script>

<template>
  <div class="social-media-index" id="layoutHeader">
    <div class="fixed-nav">
      <div class="fixed-nav-content">
        <div class="fixed-nav-logo">
          <img
            class="top_logo"
            :src="baseurl + `/images/workAi/shotstack/home/top_logo@2x.webp`"
          />
        </div>
        <ul class="fixed-nav-about">
          <li
            :class="{ 'nav-item-active': activeNavItem === 'media-txt' }"
            @click="scrollToSection('media-txt')"
            data-target="media-txt"
            class="nav-item-normal"
          >
            首页
          </li>
          <li
            :class="{ 'nav-item-active': activeNavItem === 'cpnl' }"
            @click="scrollToSection('cpnl')"
            data-target="media-txt"
            class="nav-item-normal"
          >
            产品能力
          </li>
          <li
            :class="{ 'nav-item-active': activeNavItem === 'Automatic' }"
            @click="scrollToSection('Automatic')"
            data-target="media-txt"
            class="nav-item-normal"
          >
            自动发布
          </li>
          <li
            :class="{ 'nav-item-active': activeNavItem === 'sycj' }"
            @click="scrollToSection('sycj')"
            data-target="media-txt"
            class="nav-item-normal"
          >
            适用场景
          </li>
          <li
            :class="{ 'nav-item-active': activeNavItem === 'cpys' }"
            @click="scrollToSection('cpys')"
            data-target="media-txt"
            class="nav-item-normal"
          >
            产品优势
          </li>
          <li
            :class="{ 'nav-item-active': activeNavItem === 'lxwm' }"
            @click="openwm"
            data-target="media-txt"
            class="nav-item-normal"
          >
            联系我们
          </li>
        </ul>
        <div class="fixed-nav-login">
          <a-button type="text" class="top_denglu" @click="gologin"
            >登录</a-button
          >

          <a-button type="primary" class="top_zhu" @click="gozhuce"
            >注册</a-button
          >
        </div>
      </div>
    </div>
    <div
      class="media-banner"
      id="media-txt"
      :style="{
        'background-image': `url(${baseurl}/images/workAi/shotstack/home/new_banner@2x.webp)`,
      }"
    >
       
      <div class="flex" style="gap: 125px">
           <!-- utils.staticPath -->

        <div class="banner-content antMoveLeftIn">
          <!-- <div style="position: relative;  cursor: pointer; margin-bottom: 20px;" v-show="isbanner">
             <img style="width: 1086px;"  @click="gozhuce" :src="'https://v.kuaijing.cn/' + `public_web/static/images/workAi/shotstack/1000.webp`" alt="">
          </div> -->
         
          <span class="media-txt"> <span style="color: rgb(50, 97, 251);">可以私有化</span>的短视频批量混剪&数字人克隆矩阵平台</span>
          <div class="content-txt">
            <div>涵盖视频批量混剪  <span style="color:  rgb(63, 81, 181);">数字人克隆 声音克隆</span>  视频分发 视频SEO和私域转化全链路营销工具</div>
            <div >提供批量视频混剪、脚本剪辑和图生视频等多款创作工具</div>
            <!-- class="mt-10" -->
            <div >
              支持自动发布到抖音 小红书 快手 TikTok 视频号 哔哩哔哩等平台，<span style="color: rgb(63, 81, 181);">支持OEM及私有化部署</span> 
            </div>


            <div class="mt-20">
              <a-button @click="gologin" type="primary" class="now_use">
                立即咨询
                <ArrowRightOutlined />
              </a-button>
            </div>
          </div>

          <!-- <video :src="utils.staticPath + `images/workAi/shotstack/xuanchuan.mov`"></video> -->
          <!-- <img class="home-content-img"
                            :src="baseurl + `/images/workAi/shotstack/home/home_banner@2x.webp`" alt=""> -->
          <!-- muted controls -->
          <!-- src="../../common/image/workShotstackImage/xuanchuan.mov" -->
          <!-- :src="utils.staticPath + `images/workAi/shotstack/home/xuanchuan.mov`" -->

          <div class="home-content">
            <video
              :id="videoId"
              ref="videoRef"
              class="home-content_video"
              @click="togglePlay"
              src="https://cos.kuaijingai.com/shotstack/dd2f5b0635ed3b0b8cdf868c21402623.mov"
            ></video>
            <div v-if="!isplay" class="home-play" @click="togglePlay"></div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="media-maxtrix"
      id="cpnl"
      :style="{
        'background-image': `url('${baseurl}/images/workAi/shotstack/home/bg@2x.webp')`,
        'background-position': 'center 20px',
      }"
    >
      <div class="mt-20 media-maxtrix-title">
        6大核心产品力, 从0-1全面构建视频营销全链路
      </div>
      <div class="media-maxtrix-content">
        <div class="card-row">
          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="
                  baseurl + `/images/workAi/shotstack/home/shiping_icon@2x.webp`
                "
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">视频批量剪辑</div>

              <div class="card-right-content">
                可视化自动批量剪辑，一分钟生成1000条短视频
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="
                  baseurl + `/images/workAi/shotstack/home/jiaoben_icon@2x.webp`
                "
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">智能脚本剪辑</div>

              <div class="card-right-content">
                在线化脚本编辑，提供强大的智能写作能力
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="baseurl + `/images/workAi/shotstack/home/ai_icon@2x.webp`"
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">AI智能创作工具</div>

              <div class="card-right-content">
                多款AI智能工具辅助视频创作，创作爆款短视频更简单
              </div>
            </div>
          </div>
        </div>
        <div class="card-row">
          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="
                  baseurl + `/images/workAi/shotstack/home/moban_icon@2x.webp`
                "
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">海量爆款模板一键成片</div>

              <div class="card-right-content">
                海量爆款模板，零视频基础，轻松开启您创作之旅
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="
                  baseurl + `/images/workAi/shotstack/home/juzheng_icon@2x.webp`
                "
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">矩阵账号批量管理</div>

              <div class="card-right-content">
                多平台账号一站式管理分组，标签，权限应有尽有
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-left">
              <img
                class="img"
                :src="
                  baseurl + `/images/workAi/shotstack/home/fenfa_icon@2x.webp`
                "
              />
            </div>
            <div class="card-right">
              <div class="card-right-title">全网矩阵批量发布</div>

              <div class="card-right-content">
                多平台内容运营，视频一键分发内容高效曝光
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="media-GG">
      <div class="media-GGone">
        <div class="media-GGone-left">
          <div class="media-GGone-title">短视频批量剪辑</div>

          <div class="media-GGone-content">
            快速生成大规模的宣传视频，平台独有官方内容去重算法，
            助力视频效果提升
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              一键视频批量混剪，大量视频成片，高效创作
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">深度算法去重，批量制作原创视频</div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              支持音视频裁剪、文字、特效、滤镜、贴纸、转场、字幕、配乐等
            </div>
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">私有素材匹配 智能标签分析</div>
          </div>

          <div class="mt-20 content_btn">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
        <div class="media-GGone-right">
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img1@2x.webp`"
          />
        </div>
      </div>

      <div class="media-GGtwo">
        <div
          class="media-GGone-right media-left-img"
          style="margin-right: 100px"
        >
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img2@2x.webp`"
          />
        </div>
        <div class="media-GGone-left media-right-text">
          <div class="media-GGone-title">智能脚本剪辑</div>

          <div
            class="media-GGone-content"
            style="text-align: left; width: 539px"
          >
            在线化脚本编辑器，提供强大的智能写作能力，并有海量脚本模板提供创意辅助创作
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              在线化脚本编辑器，小白也能轻松上手
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              官方爆款脚本库，帮你快速找到创意灵感
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              竞品短视频脚本解析，AI参考改写同款，不愁没灵感
            </div>
          </div>

          <div class="mt-20" style="display: flex">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
      </div>

      <div class="media-GGone">
        <div class="media-GGone-left">
          <div class="media-GGone-title">AI智能工具</div>

          <div class="media-GGone-content">
            多款智能AI工具，助力短视频创作，不愁没灵感
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              AI一键文案生成，包括短视频脚本、产品描述、信息流文案等
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              文字转语音，输入台词文案，A自动生成多语言、多音色、多情感的配音音频
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              视频智能拆分，输入爆款视频链接，即可一键智能拆分视频镜头
            </div>
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              一键提取视频文案,复制爆款视频，即可一键提取
            </div>
          </div>

          <div class="mt-20 content_btn">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
        <div class="media-GGone-right">
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img3@2x.webp`"
          />
        </div>
      </div>

      <div class="media-GGtwo">
        <div
          class="media-GGone-right media-left-img"
          style="margin-right: 100px"
        >
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img4@2x.webp`"
          />
        </div>
        <div class="media-GGone-left media-right-text">
          <div class="media-GGone-title">爆款模板广场</div>

          <div
            class="media-GGone-content"
            style="text-align: left; width: 539px"
          >
            海量爆款模板，零视频基础，轻松开启您创作之旅
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              根据行业和分类快速筛选符合自己的视频模板
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              根据模板快速导入剪辑，生成自己的短视频内容
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">海量模版素材，实时更新紧跟潮流</div>
          </div>

          <div class="mt-20" style="display: flex">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
      </div>

      <div class="media-GGone" id="Automatic" style="padding-top: 80px">
        <div class="media-GGone-left">
          <div class="media-GGone-title">矩阵账号批量管理</div>

          <div class="media-GGone-content">多账号矩阵管理，提高管理效率</div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              支持跨平台账号管理，无需手动切换账号，摆脱繁琐的登录流程
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              一键管理500+账号，具备账密记忆，分组管理，一键登录等功能
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose left"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose">
              多平台矩阵账号一站式管理，提升管理效率
            </div>
          </div>

          <div class="mt-20 content_btn">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
        <div class="media-GGone-right">
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img5@2x.webp`"
          />
        </div>
      </div>

      <div class="media-GGtwo" style="margin-bottom: 80px">
        <div
          class="media-GGone-right antMoveLeftIn"
          style="margin-right: 100px"
        >
          <img
            style="width: 640px"
            :src="baseurl + `/images/workAi/shotstack/home/img6@2x.webp`"
          />
        </div>
        <div class="media-GGone-left antMoveRightIn">
          <div class="media-GGone-title">全网矩阵批量分发</div>

          <div
            class="media-GGone-content"
            style="text-align: left; width: 539px"
          >
            多平台内容运营，视频一键分发，获取更多爆光，实现获客营销新增长基础，轻松开启您创作之旅
          </div>

          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              多平台内容运营，一键分发，省时省力
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              支持不同账号发布不同作品，可批量操作发布
            </div>
          </div>
          <div class="media-GGone-choose">
            <div>
              <img
                class="left-choose"
                :src="baseurl + `/images/workAi/shotstack/home/choose@2x.webp`"
              />
            </div>
            <div class="right-choose left">
              自动化成片发布，支持挂载POI，获取海量曝光
            </div>
          </div>

          <div class="mt-20" style="display: flex">
            <a-button
              @click="visible = true"
              type="primary"
              style="width: 166px; height: 42px; border-radius: 6px"
            >
              免费咨询
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <div
      class="media-maxtrix-need"
      id="sycj"
      :style="{
        'background-image': `url('${baseurl}/images/workAi/shotstack/home/sucai.webp')`,
      }"
    >
      <div class="mt-20 media-maxtrix-need-title">
        覆盖多行业场景，满足不同用户需求
      </div>
      <div class="media-maxtrix-content">
        <div class="card-row-need">
          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/tuoke@2x.webp')`,
            }"
          >
            <div class="card-need-text">企业宣传拓客</div>
          </div>

          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/xuanchuan@2x.webp')`,
            }"
          >
            <div class="card-need-text">门店宣传</div>
          </div>

          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/fuwus@2x.webp')`,
            }"
          >
            <div class="card-need-text">本地生活服务商</div>
          </div>
        </div>
        <div class="card-row-need">
          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/xinmeiti@2x.webp')`,
            }"
          >
            <div class="card-need-text">新媒体短视频从业者</div>
          </div>
          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/tandian@2x.webp')`,
            }"
          >
            <div class="card-need-text">本地同城探店达人</div>
          </div>
          <div
            class="card-need"
            :style="{
              'background-image': `url('${baseurl}/images/workAi/shotstack/home/guanggao@2x.webp')`,
            }"
          >
            <div class="card-need-text">信息流广告</div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="media-maxtrix-create"
      id="cpys"
      :style="{
        'background-image': `url('${baseurl}/images/workAi/shotstack/home/sucai2.webp')`,
      }"
    >
      <div class="mt-20 media-maxtrix-need-title">
        6大合作模优势，助力你的创作之路
      </div>
      <div class="media-maxtrix-content">
        <div class="card-row-need">
          <div class="card-create">
            <img
              class="card-create-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/pingtai_icon@2x.webp`
              "
              alt=""
            />
            <div class="card-create-T">多平台统一管理</div>
            <div class="card-create-C">支持抖音、快手、小红书等</div>
            <div class="card-create-C">主流视频平台</div>
          </div>

          <div class="card-create">
            <img
              class="card-create-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/caozuo_icon@2x.webp`
              "
              alt=""
            />
            <div class="card-create-T">简单易操作</div>
            <div class="card-create-C">可视化操作，小白也能快速上手</div>
            <div class="card-create-C">随时预览，所见即所得</div>
          </div>

          <div class="card-create">
            <img
              class="card-create-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/zengxiao_icon@2x.webp`
              "
              alt=""
            />
            <div class="card-create-T">降本增效</div>
            <div class="card-create-C">一个系统 = 一个团队</div>
            <div class="card-create-C">轻松获取意向客户</div>
          </div>
        </div>

        <div class="card-row-need">
          <div class="card-create">
            <img
              class="card-create-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/shengchan_icon@2x.webp`
              "
              alt=""
            />
            <div class="card-create-T">批量化生产内容</div>
            <div class="card-create-C">一分钟批量剪辑100+视频</div>
            <div class="card-create-C">让视频创作不再难</div>
          </div>
          <div class="card-create">
            <img
              class="card-create-img"
              :src="baseurl + `/images/workAi/shotstack/home/send_icon@2x.webp`"
              alt=""
            />
            <div class="card-create-T">无人值守自动化发布</div>
            <div class="card-create-C">按照指定时间自动无人值守的</div>
            <div class="card-create-C">发布内容到各平台</div>
          </div>
          <div class="card-create">
            <img
              class="card-create-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/shouhou_icon@2x.webp`
              "
              alt=""
            />
            <div class="card-create-T">数据安全、售后有保障</div>
            <div class="card-create-C">数据存储、传输层层加密</div>
            <div class="card-create-C">7*12小时线上服务群</div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="media-bottom"
      id="lxwm"
      :style="{
        'background-image': `url('${baseurl}/images/workAi/shotstack/home/contact-bg@2x.webp')`,
      }"
    >
      <div class="madia-bottom-content">
        <div>{{ appName }}-短视频创作平台</div>
        <div>开启视频矩阵化营销，获取企业营销获客新增长</div>
        <img
          class="madia-pos"
          :src="baseurl + `/images/workAi/shotstack/home/send@2x.webp`"
          alt=""
        />
        <div class="madia-bottom-input">
          <img
            style="width: 24px; margin-left: 20px; margin-top: 6px"
            :src="
              baseurl + `/images/workAi/shotstack/home/number_icon@2x.webp?v=1`
            "
            alt=""
          />

          <a-input
            :bordered="false"
            v-model:value.number="phoneNumber"
            :status="inputStatus"
            :help="inputHelp"
            style="width: 470px; font-size: 14px"
            placeholder="请输入您的手机号"
          />

          <a-button
            style="
              width: 100px;
              height: 40px;
              border-radius: 100px;
              font-size: 14px;
              font-weight: 500;
            "
            type="primary"
            @click="debouncedValidatePhoneNumber"
            >立即申请
            <ArrowRightOutlined />
          </a-button>
        </div>
      </div>
    </div>

    <div class="copyright" id="lxwm">
      <div class="copyright-top">
        <div class="copyright-top-item">
          <div>
            <img
              class="copyright-top-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/footer_icon1@2x.webp`
              "
              alt=""
            />
          </div>
          <div>7*24小时运维服务</div>
        </div>
        <div class="copyright-top-item">
          <div>
            <img
              class="copyright-top-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/footer_icon2@2x.webp`
              "
              alt=""
            />
          </div>
          <div>专业售前/售后工程师</div>
        </div>
        <div class="copyright-top-item">
          <div>
            <img
              class="copyright-top-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/footer_icon3@2x.webp`
              "
              alt=""
            />
          </div>
          <div>支持私有化部署</div>
        </div>
        <div class="copyright-top-item">
          <div>
            <img
              class="copyright-top-img"
              :src="
                baseurl + `/images/workAi/shotstack/home/footer_icon4@2x.webp`
              "
              alt=""
            />
          </div>
          <div>支持个性化需求定制</div>
        </div>
      </div>

      <div class="copyright-contetn" id="lxwm">
        <div class="copyright-contetn-left ">
          <div>
            <div class="left-one" style="display: flex">
            <img
              style="width: 160px; height: 36px; margin: 25px 0 28px 0"
              :src="baseurl + `/images/workAi/shotstack/home/logo@2x.webp`"
              alt=""
            />
          </div>
          <div style="text-align: left">联系我们</div>
          <div style="margin-top: 5px">
            <span class="bottom-tel">400-893-552</span>
            <span class="bottom-time">(服务时间:9:00 - 22:00)</span>
          </div>

          <div style="text-align: left; margin: 15px 0 10px 0">网站地址</div>
          <div class="bottom-web">https://v.kuaijing.cn</div>

          <div style="text-align: left; margin: 15px 0 10px 0">联系地址</div>

          <div class="bottom-web">安徽省合肥市高新区西二环亚夏大厦10F</div>
          </div>

          <div class="tiaokuan">
            <div>
              <a target="_blank" href="https://v.kuaijing.cn/UseAgreement">用户服务条款</a>
            </div>
            <div>
              <a target="_blank" href="https://v.kuaijing.cn/PrivacyAgreement">隐私协议</a>
            </div>
          </div>
        </div>

   

        <div class="copyright-contetn-right">
          <img
            class="bottom-code"
            :src="baseurl + `/images/workAi/shotstack/home/code_new_6.webp`"
          />

          <div class="bootom-codeT">在线咨询</div>
        </div>
      </div>
      <div style="margin-top: 12px">
        Copyright©合肥快鯨科技有限公司 Al Rights Reserved 工信部备案号:
        <a href="https://beian.miit.gov.cn/" target="_blank">
          皖ICP备19022900号-3</a
        >
      </div>
    </div>
  </div>
  <ShotstackLoginModal
    ref="ShotstackLoginModals"
    :zhuce="zhuce"
    :visible="loginVisible"
    @onClose="loginVisible = false"
    @loginCallback="loginCallback"
  />
  <a-modal
    :dialogStyle="{
      top: '500px',
    }"
    :footer="null"
    :closable="false"
    :width="340"
    v-model:visible="visible"
    @ok="handleOk"
  >
    <div class="model-v">
      <img
        class="model-img"
        :src="baseurl + `/images/workAi/shotstack/home/code_new_6.webp`"
      />
    </div>
    <div class="model-T">微信扫码咨询客服</div>
  </a-modal>
</template>

<style lang="less" scoped>
.social-media-index {
  position: relative;
  min-width: 1200px;
}

.media-banner {
  display: flex;
  justify-content: center;
  background-position: center -90px;
  background-size: cover;
  background-repeat: no-repeat;

  // height: 580px;
  padding-top: 20px;
}

.banner-right {
  position: relative;
  width: 420px;
  height: 380px;
  flex-shrink: 0;
  margin-left: 100px;
  // 背景图片居中 包含 显示
  background-position: center center;
  background-size: cover;
  margin-top: 85px;
}

.banner-content {
  font-size: 60px;
  flex-shrink: 0;
  padding-top: 118px;
}

.media-txt {
  width: 668px;
  height: 67px;
  font-weight: 700;
  font-size: 50px;
  color: #243042;
  line-height: 60px;
}

.content-txt {
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  color: #243042;
  line-height: 50px;
  letter-spacing: 1px;
}

.home-content {
  width: 1200px;
  height: 688px;
  margin-top: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0px 30px 60px 0px rgba(25, 55, 102, 0.25);

  position: relative;

  .home-content_video {
    object-fit: cover;
    width: 90%;
    border-radius: 8px;
  }

  // .home-content-img {
  //     width: 100%;
  //     // margin-bottom: 20px;
  // }
}

.home-play {
  width: 126px;
  height: 126px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

.home-play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 60px solid #fff;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  transition: border-color 0.3s ease;
}

.home-play:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.home-play:hover::after {
  border-left-color: #fff;
}

.media-maxtrix {
  display: flex;
  flex-direction: column;
  align-items: center;
  // height: 700px;
  background-color: #fff;
  padding: 40px 160px;
  // background-image: url(../../common/image/workShotstackImage/bg@2x.webp);
  background-size: cover;
  background-position: center center;
}

.media-maxtrix-left {
  width: 712px;
  height: 500px;
  background-image: url(../../../common/image/socialMedia/media-maxtrix-left-bg.webp);

  background-size: cover;
}

.media-maxtrix-title {
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  color: #2b3346;
  line-height: 50px;
  margin-bottom: 60px;
  margin-top: 160px;
}

.media-maxtrix-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 15px;
}

.card {
  width: 380px;
  height: 168px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding: 30px 20px 20px 20px;

  .card-left {
    width: 80px;

    .img {
      width: 60px;
      height: 60px;
    }
  }

  .card-right {
    width: 300px;

    .card-right-title {
      font-weight: 600;
      font-size: 22px;
      color: #3b3e43;
      line-height: 30px;
      text-align: left;
      margin-bottom: 10px;
    }

    .card-right-content {
      font-weight: 400;
      font-size: 15px;
      color: #595e64;
      line-height: 26px;
      text-align: left;
    }
  }
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.media-GG {
  display: flex;
  flex-direction: column;
  align-items: center;
  // padding: 208px 160px 0px 160px;
  padding: 108px 160px 0px 160px;

  .media-GGone {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 177px;

    .media-GGone-left {
      width: 50%;
      height: 480px;

      .media-GGone-title {
        font-weight: 700;
        font-size: 30px;
        color: #2b3346;
        line-height: 48px;
        text-align: left;
        margin-bottom: 18px;
      }

      .media-GGone-content {
        font-weight: 400;
        font-size: 17px;
        color: #999999;
        line-height: 24px;
        text-align: left;
        width: 449px;
        margin-bottom: 40px;
      }
    }

    .media-GGone-right {
      width: 50%;
      height: 480px;
      padding-left: 30px;
    }
  }
}

.media-GGone-choose {
  display: flex;
  margin-bottom: 44px;
  align-items: center;
}

.left {
  margin-right: 23px;
}

.left-choose {
  width: 24px;
  height: 24px;
  margin-right: 23px;
}

.right-choose {
  font-weight: 400;
  font-size: 16px;
  color: #5e6282;
  line-height: 20px;
  text-align: left;
}

.media-GGtwo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 177px;

  .media-GGone-left {
    width: 50%;
    height: 480px;

    .media-GGone-title {
      font-weight: 700;
      font-size: 30px;
      color: #2b3346;
      line-height: 48px;
      text-align: left;
      margin-bottom: 18px;
    }

    .media-GGone-content {
      font-weight: 400;
      font-size: 15px;
      color: #999999;
      line-height: 24px;
      width: 449px;
      margin-bottom: 40px;
    }
  }

  .media-GGone-right {
    width: 50%;
    height: 480px;
  }
}

.media-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 760px;
  background-color: #fff;
  padding: 60px 160px 40px 160px;

  background-image: url(../../../common/image/socialMedia/media-ai-bg.webp);
  background-position: center 100%;
  background-size: cover;
  // opacity:0,
}

.media-table {
  width: 500px;
  height: 300px;
  background: #ffffff;
  box-shadow: -2px 0px 21px 2px rgba(206, 206, 206, 0.28);
  border-radius: 3px;
  padding: 20px;
}

.account-icon {
  width: 30px;
  height: 30px;
}

.account-icon-title {
  margin-left: 5px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.media-maxtrix-right-item {
  position: relative;
  width: 500px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 40px;

  &:hover {
    transform: scale(1.05);
    filter: opacity(1);
  }
}

.account-icon-content {
  position: relative;
  margin-top: 10px;
  padding: 0 20px;
  border-radius: 3px;

  &::before {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-block;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #000;
  }
}

.active-maxtrix-item {
  box-shadow: -2px 0px 18px 2px rgba(213, 213, 213, 0.28);
}

.media-maxtrix-sub_title {
  margin-top: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  font-size: 16px;
}

.tab-list {
  position: relative;
  display: flex;
  margin: 30px 0 50px 0;

  .tab-line {
    position: absolute;
    left: v-bind(tabLineLeft);
    bottom: 0;
    width: v-bind(tabLineWidth);
    height: 2px;
    background: var(--ss-primary-color);
    transition: all 0.3s;
  }
}

.tab-item {
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  cursor: pointer;
}

.media-ai-content {
  display: flex;
}

.media-ai-content-left {
  width: 500px;
  height: 448px;
  background: url(../../../common/image/socialMedia/edit-content-bg.webp)
    no-repeat center;

  background-size: contain;
}

.media-ai-content-right {
  width: 500px;
  height: 448px;
  background: url(../../../common/image/socialMedia/account-setting-bg.webp)
    no-repeat center;

  background-size: contain;
}

.media-ai-content-center {
  width: 900px;
  height: 450px;
  background: url(../../../common/image/socialMedia/product-bg-1.webp) no-repeat
    center;
  background-size: contain;
}

.data-center {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 620px;

  background: url(../../../common/image/socialMedia/data-content.webp) no-repeat
    center 90%;
  padding: 40px 160px;
  background-size: cover;
  background-color: #fff;
}

.data-content {
  width: 640px;
  height: 580px;
  background: url(../../../common/image/socialMedia/data-content-bg.webp)
    no-repeat center;
  margin-top: 30px;
  background-size: contain;
}

.product-merit {
  display: flex;
  flex-direction: column;
  padding: 40px 160px;
  align-items: center;
  height: 460px;
  background-image: url(../../../common/image/socialMedia/media-ai-bg.webp);
  background-position: center 100%;
  background-size: cover;
  background-color: #fff;
}

.product-content {
  display: flex;
}

.product-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px;
  text-align: center;
}

.product-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.product-item-intro {
  margin-top: 20px;
  color: #999999;
  font-size: 16px;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 160px;
  align-items: center;
  height: 210px;
  background-image: url(../../../common/image/socialMedia/bottom-bg.webp);
  background-position: center 90%;
  background-size: cover;
}

.footer-content {
  // width:100px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}

.copyright {
  padding: 40px 160px;
  height: 458px;
  // line-height: 436px;
  background-color: #1f2e3c;
  color: #99aabe;
  text-align: center;
}

.copyright-top {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  // border-bottom: 1px solid #D9E0E7;
}

.copyright-top-item {
  display: flex;
  font-size: 20px;
  color: #ffffff;
  line-height: 53px;
  margin-right: 100px;
}

.copyright-top-img {
  width: 34px;
  margin-right: 12px;
}

.copyright-contetn {
  display: flex;
  justify-content: space-between;
  width: 1261px;
  height: 300px;
  margin: auto;
  border-top: 2px solid #2a374b;
  border-bottom: 2px solid #2a374b;

  .copyright-contetn-left{
    display: flex;
    gap: 40px;

    .tiaokuan{
      font-size: 18px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
      text-align:start;
      a {
        color:#fff ;
      }
    }
    

  }
}

.btn-a {
  // 应用动画
  animation: swing 3s infinite;
  -webkit-animation: swing 3s infinite;
}

@keyframes swing {
  // 左右摆动动画
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(10deg);
  }

  20% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(10deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(10deg);
  }

  80% {
    transform: rotate(-10deg);
  }

  90% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.antZoomIn {
  animation-name: antZoomIn;
  animation-duration: 1s;
  opacity: 1;
}

.fade-in {
  animation-name: fade-in;
  animation-duration: 1s;
  opacity: 1;
}

.antMoveLeftIn {
  animation-name: antMoveLeftIn;
  animation-duration: 1s;
  opacity: 1;
  text-align: center;
}

.antMoveRightIn {
  animation-name: antMoveRightIn;
  animation-duration: 1s;
  opacity: 1;
}

@keyframes fade-in {
  0% {
    transform: translateY(100%);
    transform-origin: 0 0;
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveLeftIn {
  0% {
    transform: translateX(-100%);
    transform-origin: 0 0;
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveRightIn {
  0% {
    transform: translateX(100%);
    transform-origin: 0 0;
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antZoomIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.ml-50 {
  margin-left: 50px;
}

.active-tab {
  color: var(--ss-primary-color);
}

.xiaohongshu-circle {
  position: absolute;
  left: 340px;
  top: 230px;
  animation: breath-out 1.5s infinite;
}

.douying-circle {
  position: absolute;
  bottom: 60px;
  left: 25px;
  animation: breath-out 1.5s infinite;
}

.toutiao-circle {
  position: absolute;
  top: -20px;
  right: 100px;
  animation: breath-out 1.5s infinite;
}

.wb-circle {
  position: absolute;
  top: -10px;
  left: 60px;
  animation: breath-out 1.5s infinite;
}

.now_use {
  width: 224px;
  height: 55px;
  background: #2878ff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 8px 8px;
  font-weight: 500;
  font-size: 20px;
  color: #ffffff;
  line-height: 22px;
  letter-spacing: 2px;
  text-align: center;
  margin-top: 30px;
}

.media-maxtrix-need {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 970px;
  padding: 100px 160px 0px 160px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.media-maxtrix-create {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 970px;
  padding: 80px 160px 0px 160px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.media-maxtrix-left {
  width: 712px;
  height: 500px;
  background-image: url(../../../common/image/socialMedia/media-maxtrix-left-bg.webp);

  background-size: cover;
}

.media-maxtrix-need-title {
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  color: #2b3346;
  line-height: 50px;
  margin-bottom: 60px;
}

.media-maxtrix-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.card-row-need {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 15px;
}

.card-need {
  width: 380px;
  height: 328px;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding: 30px 20px 20px 20px;
  border-radius: 13px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.card-create {
  z-index: 99 !important;
  width: 380px;
  height: 328px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  padding: 30px 20px 20px 20px;
  border-radius: 13px;
  position: relative;
  text-align: center;
  background-color: #fff;
}

.card-create:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.card-create-img {
  width: 96px;
  // height: 96px;
  margin-bottom: 30px;
}

.card-create-T {
  font-weight: 700;
  font-size: 22px;
  color: #3b3e43;
  line-height: 30px;
  margin-bottom: 20px;
}

.card-create-C {
  width: 260px;
  font-size: 16px;
  color: #595e64;
  line-height: 30px;
  margin: auto;
}

.card-need-text {
  position: absolute;
  bottom: 14px;
  left: 20px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  z-index: 1;
}

.card-need::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 13px 13px;
}

.card-need:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

.media-bottom {
  width: 100%;
  height: 535px;
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 33px;
  color: #5e6282;
  line-height: 60px;
  text-align: center;
}

.madia-bottom-content {
  position: relative;

  .madia-pos {
    position: absolute;
    top: -90px;
    left: 880px;
    width: 70px;
    margin-top: 4px;
  }
}

.madia-bottom-input {
  width: 642px;
  height: 60px;
  line-height: 52px;
  background-color: #fff;
  border-radius: 100px;
  margin-top: 60px;
}

.bottom-tel {
  font-size: 32px;
  color: #ffffff;
  line-height: 40px;
  margin-right: 10px;
}

.bottom-time {
  font-size: 12px;
  color: #ffffff;
  line-height: 14px;
  text-align: left;
}

.bottom-web {
  text-align: left;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  text-align: left;
}

.bottom-code {
  width: 130px;
  margin: 57px 0 14px 0;
}

.bootom-codeT {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
}

.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  line-height: 68px;
  background-color: #fff;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;

  .fixed-nav-content {
    width: 1400px;
    display: flex;
    justify-content: space-between;

    .fixed-nav-logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;

      li {
        padding: 0 20px;
        color: #3d3d3d;
        font-weight: 600;
        cursor: pointer;

        &:hover {
          color: #2878ff;
        }
      }
    }
  }
}

// .fixed-nav {
//     position: fixed;
//     top: 0;
//     width: 100%;

//     line-height: 68px;
//     background-color: #fff;
//     z-index: 100;
// }

// .fixed-nav ul {
//     list-style-type: none;
//     margin: 0;
//     padding: 0;
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }

// .fixed-nav li {
//     color: #3D3D3D;
//     cursor: pointer;
//     font-weight: 600;
//     padding: 10px 20px;
// }

// .fixed-nav li:hover {
//     color: #2878FF;
// }

// .fixed-nav li:hover {
//   color: #2878ff;
// }

.top_logo {
  width: 127px;
}

.top_zhu {
  width: 100px;
  height: 40px;
  border-radius: 7px;
  font-weight: 600;
}

.top_denglu {
  color: #3d3d3d;
  margin: 0 20px 0 15px;
  font-weight: 600;
}

.nav-item-active {
  color: #2878ff !important;
}

.nav-item-normal {
  font-size: 16px;
  color: #3d3d3d;
  text-align: left;
}

.content_btn {
  display: flex;
}

.mask-modal {
  position: absolute;
  //    top: 270px !important;
  //     right: 790px !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

.model-v {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.model-img {
  width: 200px;
  height: 200px;
}

.model-T {
  font-size: 14px;
  text-align: center;
  color: rgb(153, 153, 153);
}

/* 对于横向滚动条 */
::-webkit-scrollbar {
  width: 0;
  /* 隐藏横向滚动条 */
}

::-webkit-scrollbar-track {
  background: transparent;
  /* 滚动条轨道颜色（若可见） */
}

::-webkit-scrollbar-thumb {
  background: transparent;
  /* 滚动条拇指颜色（若可见） */
}

/* 对于纵向滚动条 */
::-webkit-scrollbar {
  height: 0;
  /* 隐藏纵向滚动条 */
}
</style>
